<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <!-- 导入 js jquery 库-->
    <script src="/static/js/jquery.min.js"></script>

    <link href="/static/css/index.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <script>

        $(function () {
            $(".upload").mouseenter(function () {
                $(".upload_file").show();
                $(".upload_dir").show();
            });

            $(".upload_dir").mouseleave(function () {
                $(".upload_file").hide();
                $(".upload_dir").hide();
            });

        });

    </script>

    <script>
        layui.use(['layer', 'form', 'upload', 'element'], function(){
            var layer = layui.layer;
            var upload = layui.upload;
            var element = layui.element;

            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_file' //绑定元素
                ,url: '/layuiFileUpload' //上传接口
                ,done: function(res){ //上传完毕回调
                    layer.msg("上传完毕");
                    console.log(res.data.src);
                    //
//                    $("img").attr("src", res.data.src);
                }
            });
        });
    </script>


</head>
<body>

<div class="file_top">

    <div class="file_top_left">

        <a href="javascript:void(0)" class="upload">
            <img src="/static/img/upload.png"/>
        </a>

        <a href="javascript:void(0)" id="upload_file" class="upload_file">
            <img src="/static/img/upload_file_btn.png"/>
            <%--<i class="layui-icon">&#xe67c;</i>上传文件--%>
        </a>

        <a href="javascript:void(0)" id="upload_dir" class="upload_dir">
            <img src="/static/img/upload_dir_btn.png"/>
            <%--<i class="layui-icon">&#xe67c;</i>上传文件夹--%>
        </a>

        <a href="#" class="mkDir">
            <img src="/static/img/mkDir.png"/>
        </a>

        <a href="#" class="download">
            <img src="/static/img/download.png"/>
        </a>

        <a href="#" class="more">
            <img src="/static/img/more.png"/>
        </a>

    </div>

    <div class="file_top_right">

        <div class="list-group">
            <form class="bs-example bs-example-form search-form" role="form">
                <div class="input-group">
                    <input id="searchInput" name="param" type="text" class="form-control" placeholder="搜索您的文件">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="button">搜索一下</button>
                        <%--<button class="btn btn-default sort" type="button"></button>--%>
                        <%--<button class="btn btn-default showList" type="button"></button>--%>
                    </div>
                    <%--<a href="#" class="sort">--%>
                        <%--<img src="/static/img/sort.png" width="40" height="40" />--%>
                    <%--</a>--%>
                    <%--<a href="#" class="showList">--%>
                        <%--<img src="/static/img/showList.png" width="40" height="40" />--%>
                    <%--</a>--%>
                </div>
            </form>
        </div>

    </div>



</div>

<div class="file_bottom">

    <table class="layui-table" lay-filter="demo">
        <thead>
        <th><input type="checkbox"/></th>
        <th lay-data="{field:'username', width:100}">文件名</th>
        <th>大小</th>
        <th>修改日期</th>
        </thead>

        <tbody>
        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>


        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        <tr>
            <td><input type="checkbox"/></td>
            <td>a.txt</td>
            <td>512M</td>
            <td>2020-09-24</td>
        </tr>

        </tbody>

    </table>

</div>

</body>
</html>
